<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="khj" content="">
    <link rel="stylesheet" href="css/search.css">
    <script src="js/jquery-2.0.3.js"></script>

    <title>下拉搜索</title>
</head>
<body>
<form class="nav-form">
    <input id="search-input" type="text"/>
    <input id="search-input1"type="submit" value="搜索"/>
    <ul class="search-a">
        <li><a href="script:;">小米MIX</a></li>
        <li><a href="script:;">人工智能电视</a></li>
    </ul>
    <!--下拉搜索框-->
    <ul class="down-list">
        <li><a href="script:;">小米5s Plus<span>约有5件</span></a></li>
        <li><a href="script:;">小米Max<span>约有8件</span></a></li>
        <li><a href="script:;">小米手机5<span>约有10件</span></a></li>
        <li><a href="script:;">空气净化器2<span>约有3件</span></a></li>
        <li><a href="script:;">活塞耳机<span>约有3件</span></a></li>
        <li><a href="script:;">小米路由器<span>约有6件</span></a></li>
        <li><a href="script:;">移动电源<span>约有14件</span></a></li>
        <li><a href="script:;">运动相机<span>约有11件</span></a></li>
        <li><a href="script:;">小蚁摄像机<span>约有2件</span></a></li>
        <li><a href="script:;">小米体重秤<span>约有1件</span></a></li>
        <li><a href="script:;">小米插线板<span>约有10件</span></a></li>
        <li><a href="script:;">配件优惠套装<span>约有23件</span></a></li>
    </ul>
</form>
</body>

</html>

<script>
   $('form.nav-form input#search-input').on('click',function (e) {
       e.stopPropagation()
       $('ul.down-list').css('display','block')
       $('form.nav-form input').css('border-color','#ff6700')
       $('form.nav-form #search-input').css('border-bottom','none')
       $('ul.search-a li').css('display','none')
   })
    $(document).click(function () {
        $('ul.down-list').css('display','none')
        $('form.nav-form input').css('border-color','#e0e0e0')
//        $('form.nav-form #search-input').css('border-bottom','none')
        $('ul.search-a li').css('display','block')
    })

</script>